<template>
  <a-upload
    :style="setstyle"
    name="avatar"
    accept=".mp4"
    listType="picture-card"
    class="avatar-uploader"
    :showUploadList="false"
    :customRequest="customUpload"
  >
    <video
      v-if="filePathUrl !== ''"
      :style="setstyle"
      :src="fileShowUrl+filePathUrl"
      :preload="preload"
      controls="controls">
      您的浏览器不支持视频播放
    </video>
    <div v-else>
      <a-icon :type="loading" />
      <div class="ant-upload-text">Upload</div>
    </div>
  </a-upload>
</template>

<script>
import { fileUpload } from './upload'
import baseapi from '@/api/base'

export default {
  name: 'VideoUpload',
  props: {
    uploadUrl: {
      default: baseapi.fileUploadUrl,
      required: false,
      type: String
    },
    appId: {
      default: baseapi.huiwcore_app,
      required: false,
      type: String
    },
    idno: {
      default: 'idno',
      required: false,
      type: String
    },
    fileShowUrl: {
      default: baseapi.fileShowUrl,
      required: false,
      type: String
    },
    preload: {
      default: true,
      required: false,
      type: Boolean
    },
    placeholder: {
      default: '',
      required: false,
      type: String
    },
    setstyle: {
      default: 'width:720px;height:450px;',
      required: false,
      type: String
    },
    value: {
      default: '',
      required: false,
      type: String
    }
  },
  data () {
    return {
      loading: 'plus',
      dictOptions: [],
      uploadHeaders: {},
      filePathUrl: this.value,
      imgShowPathUrl: ''
    }
  },
  created () {
    // this.initDictData()
  },
  methods: {
    beforeUpload () {
    },
    handleChange (val) {
      this.$emit('change', this.filePathUrl)
      // this.$emit('dataChanged', val)
    },
    customUpload (option) {
      const _this = this
      // const fileUrl = this.uploadUrl
      const formData = new FormData()
      console.log('option', option)
      formData.append('appId', _this.appId)
      formData.append('idno', _this.idno)
      formData.append('fileTitle', option.file.name)
      formData.append('file', option.file)
      new Promise((resolve) => {
        _this.loading = 'loading'
        resolve(fileUpload(formData, {}))
      }).then((res) => {
        if (res && res.code && res.code === 'C1' && res.data) {
          _this.value = res.data.fullUrl
          this.$emit('change', _this.value)
          // _this.filePathUrl = _this.imgShowUrl + res.data.thumbnailUrl
        }
      }).catch(() => {
        // console.log(err)
      }).finally(() => {
        _this.loading = 'plus'
      })
    }
  },
  watch: {
    value: function () {
      this.filePathUrl = this.value
    }
  }
}
</script>
<style lang="less" scoped>
  .avatar-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
